﻿import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtGraphicalEffects 1.14

Item {
    id: root

    property int editWidth: 180*dp
    property int titleWidth: title === "" ? 0 : 80*dp
    property string title: ""
    property bool required: false
    property bool editable: true

    property bool canCheckAll: true   // 是否有"全部"选项 (还没做)
    property bool hasCheckAll: false

    // 下拉框Item样式
    property real listItemHeight: 40*dp
    property int  showListMaxCountinPage: 4
    property real popupHeight: listItemHeight * Math.min(showListMaxCountinPage, model.length)

    property var model: ["Content1", "Content2", "Content3"]
    property var checkedState: []

    property bool mutex: false
    onCheckedStateChanged: {

        if(mutex)   return

        mutex = true
        var hca = true
        for(let i = 0; i < checkedState.length; i ++){
            if(checkedState[i] === false){
                hca = false
                break
            }
        }
        hasCheckAll = hca
        console.log("hasCheckAll变更为", hca)
        mutex = false
    }


    // 下拉框选项变更事件
    signal checkChanged()


    // GET =========
    function getCheckedList(){
        var list = []
        for(let i = 0; i < model.length; i ++){
            if(checkedState[i]){
                list.push(model[i])
            }
        }
        return list
    }function getText(){
        var res = ""
        for(let i = 0; i < model.length; i ++){
            if(checkedState[i]){
                if(res !== ""){
                    res += ","
                }res += model[i].toString()
            }
        }
        return res
    }
    // SET =========
    function setCheckedState(name, state){  // 设置单个选项状态
        for(let i = 0; i < model.length; i ++){
            if(model[i] === name){
                checkedState[i] = state
            }
        }
        checkedStateChanged()
    }
    function setCheckedList(checkedList){   // 列表

        initCheckState()
        for(let i = 0; i < checkedList.length; i ++){
            let index = model.indexOf(checkedList[i])
            if(index !== -1){
                checkedState[index] = true
            }
        }
        checkedStateChanged()
    }
    function setText(text){             // 设置文本，用","分隔
        var checkedList = text.split(",")
        setCheckedList(checkedList)
    }


    // private ========================================================================

    height: 40*dp
    width: titleWidth + editWidth

    onModelChanged: {
        initCheckState()
    }

    function initCheckState(){      // 全部初始化为false
        checkedState = []
        for(let i = 0; i < model.length; i ++){
            checkedState.push(false)
        }
        root.checkedStateChanged()
    }



    Item{
        height: parent.height
        Text{
            text: title
            font.pixelSize: config.fontsize
            x: 0
            anchors.verticalCenter: parent.verticalCenter
        }
    }

    ComboBox {
        id: control
        height: parent.height
        width: editWidth
        x: titleWidth


        // 下拉框中每一个选项的代理样式
        delegate: ItemDelegate {
        }

        // 显示框文本样式
        contentItem: Text {
            id: textInput
            text: getText()
            font.pixelSize: config.fontsize
            verticalAlignment: Text.AlignVCenter
            width: control.width - 40*dp
            elide: Text.ElideRight
            leftPadding: 10*dp
            clip: true
        }

        // 显示框背景样式
        background: Rectangle {
            anchors.fill: parent
            border.color: "#CCCCCC"
            radius: 3*dp
        }

        // 向下三角箭头
        indicator: Item {
            width: 25*dp;  height: 20*dp
            x: control.width - 30*dp
            y: (control.height-height) / 2
            Image {
                anchors.fill: parent
                source: "qrc:/picture/downarrow.png"
            }
        }

        // 下拉框（Popup）
        popup: Popup {
            id: popup
            width: control.width
            height: popupHeight
            y: control.height+2*dp
            padding: 0
            // popup的内容
            contentItem: Rectangle{
                id: popup_content
                height: popHeight;  width: control.width
                clip: true
                ListView{
                    height: popup_content.height; width: popup_content.width
                    model: root.model.length + (canCheckAll ? 1 : 0)
                    delegate: CustomComboMultiBoxPopupItem{
                        property int idx: index - (canCheckAll ? 1 : 0)
                        title: (index===0&&canCheckAll) ? "全部" : root.model[idx]
                        height: listItemHeight;
                        checked: {
                            if(index === 0 && canCheckAll){
                                return hasCheckAll
                            }else{
                                return checkedState[idx]
                            }
                        }
                        onClicked: {
                            if(index === 0 && canCheckAll){

                                hasCheckAll = !hasCheckAll
                                for(let i = 0; i < checkedState.length; i ++){
                                    checkedState[i] = hasCheckAll
                                }
                                checkedStateChanged()
                            }else{
                                checkedState[idx] = !checkedState[idx]
                                root.checkedStateChanged()
                                root.checkChanged()
                            }
                        }
                    }
                }
            }

            // popup的背景
            background: Rectangle {
                clip: true
                radius: 3*dp
                border.color: "#CCCCCC"
                layer.enabled: true  // 设置layer为enable
                // 阴影
                layer.effect: DropShadow {
                    radius: 21*dp
                    samples: 43
                    transparentBorder: true
                    color: "#4D002062"
                }
            }

            // 过渡效果
            enter: Transition {
                NumberAnimation {
                    property: "height"
                    from: 0
                    to: popupHeight
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "height"
                    from: popupHeight
                    to: 0
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }

    }

    Rectangle{
        anchors.fill: control
        color: "#EEEEEE"
        opacity: 0.6
        MouseArea{
            anchors.fill: parent
            onReleased: {

            }
        }
        visible: !editable
    }


}
